{% extends "base.html" %}

{% block head %}
    <head>
        <meta charset="utf-8">
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>personal_blog</title>
        <link rel="stylesheet" type="text/css" href="../../static/css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="../../static/css/nprogress.css">
        <link rel="stylesheet" type="text/css" href="../../static/css/style.css">
        <link rel="stylesheet" type="text/css" href="../../static/css/font-awesome.min.css">
        <link rel="apple-touch-icon-precomposed" href="../../static/images/icon/icon.png">
        <link rel="shortcut icon" href="../../static/images/icon/favicon.ico">
        <script src="../../static/js/jquery-2.1.4.min.js"></script>
        <script src="../../static/js/nprogress.js"></script>
        <script src="../../static/js/jquery.lazyload.min.js"></script>
        <!--[if gte IE 9]>
        <script src="../../static/js/jquery-1.11.1.min.js" type="text/javascript"></script>
        <script src="../../static/js/html5shiv.min.js" type="text/javascript"></script>
        <script src="../../static/js/respond.min.js" type="text/javascript"></script>
        <script src="../../static/js/selectivizr-min.js" type="text/javascript"></script>
        <![endif]-->
        <!--[if lt IE 9]>
        <script>window.location.href = 'upgrade-browser.html';</script>
        <![endif]-->
    </head>
{% endblock %}

{% block body %}
    <body class="user-select single">
{% endblock %}

{% block hot %}
<div class="widget widget_hot">
            <h3>热门文章</h3>
            <ul>
                {% for article in articles.order_by('-views') %}
                <li><a href="{{ url('category:article_detail',kwargs={'id':article.id}) }}"><span class="thumbnail">
                    {% if article.tag.id==1 %}
                <img class="thumb" data-original="../../static/images/php.png" src="../../static/images/php.png" alt="">
            {% elif article.tag.id==2 %}
                <img class="thumb" data-original="../../static/images/Python.png" src="../../static/images/Python.png"
                     alt="">
            {% elif article.tag.id==3 %}
                <img class="thumb" data-original="../../static/images/MySQL.png" src="../../static/images/MySQL.png"
                     alt="">
            {% else %}
                <img class="thumb" data-original="../../static/images/c++.png" src="../../static/images/c++.png" alt="">
            {% endif %}
                </span>
                    <span
                        class="text">{{ article.title }}</span><span class="muted"><i
                        class="glyphicon glyphicon-time"></i> {{article.date}}</span><span class="muted"><i
                        class="glyphicon glyphicon-eye-open"></i> {{ article.views }}</span></a></li>
                {% endfor %}


            </ul>
        </div>
{% endblock %}

{% block content %}
    <div class="content">
        <header class="article-header">
            <h1 class="article-title"><a href="article.html">{{ article.title }}</a></h1>
            <div class="article-meta"> <span class="item article-meta-time">
          <time class="time" data-toggle="tooltip" data-placement="bottom" title="时间：{{article.date}}"><i
                  class="glyphicon glyphicon-time"></i> {{ article.date }}</time>
          </span> <span class="item article-meta-source" data-toggle="tooltip" data-placement="bottom"
                        title="来源：{{ article.article_use.username }}"><i class="glyphicon glyphicon-globe"></i> {{ article.article_use.username }}</span> <span
                    class="item article-meta-category" data-toggle="tooltip" data-placement="bottom"
                    title="栏目：{{ article.category }}"><i class="glyphicon glyphicon-list"></i> <a href="program"
                                                                                title="">{{ article.category }}</a></span>
                <span
                        class="item article-meta-views" data-toggle="tooltip" data-placement="bottom" title="查看：{{ article.views }}"><i
                        class="glyphicon glyphicon-eye-open"></i> {{ article.views }}</span> <span
                        class="item article-meta-comment"
                        data-toggle="tooltip"
                        data-placement="bottom"
                        title="评论：{{ article.comments_set.count() }}"><i
                        class="glyphicon glyphicon-comment"></i> {{ article.comments_set.count() }}个不明物体</span></div>
        </header>
        <article class="article-content">


            {{ article.content|safe}}

            <p class="article-copyright hidden-xs">未经允许不得转载：<a href="">personal_b log</a> » <a
                    href="{{ url('index:index') }}">{{ article.title }}</a>
            </p>
        </article>
        <div class="article-tags">标签：<a href="" rel="tag">{{ article.tag }}</a></div>
        <div class="relates">
            <div class="title">
                <h3>相关推荐</h3>
            </div>

            <ul>
                {% for itme in pca %}
                    <li><a href="{{ url('category:article_detail',kwargs={'id':itme.id}) }}">{{ itme.title }}</a></li>
                {% endfor %}

            </ul>
        </div>
        <div class="title" id="comment">
            <h3>评论 <small>抢沙发</small></h3>
        </div>
        {% if not request.COOKIES['sessionid'] %}
            <div id="respond">
                <div class="comment-signarea">
                    <h3 class="text-muted">评论前必须登录！</h3>
                    <p><a href="{{ url('users:login') }}" class="btn btn-primary login" rel="nofollow">立即登录</a> &nbsp;
                        <a
                                href="{{ url('users:register') }}" class="btn btn-default register"
                                rel="nofollow">注册</a></p>
                    <h3 class="text-muted">当前文章禁止评论</h3>
                </div>
            </div>
        {% else %}
            <div id="respond">
                <form action="{{ url('comments:comments',kwargs={'id':article.id}) }}" method="post" id="comment-form">
                    <div class="comment">
                        <div class="comment-title"><img class="avatar" src="../../static/images/icon/icon.png" alt=""/>
                        </div>
                        <div class="comment-box">
                            <textarea placeholder="您的评论可以一针见血" name="comment" id="comment-textarea" cols="100%" rows="3"
                                      tabindex="1"></textarea>
                            <div class="comment-ctrl">
                                <div class="comment-prompt"><i class="fa fa-spin fa-circle-o-notch"></i> <span
                                        class="comment-prompt-text"></span></div>
                                <input type="hidden" value="1" class="articleid"/>
                                <button type="submit" name="comment-submit" id="comment-submit" tabindex="5"
                                        articleid="1">评论
                                </button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        {% endif %}

        <div id="postcomments">
            <ol class="commentlist">

                     {% for comment in comments %}
                    <div class="comment-avatar"><img class="avatar" src="../../static/images/icon/icon.png" alt=""/>
                    </div>

                        <div class="comment-main">
                            <p>来自<span class="address">{{ comment.comment_user.username }}</span>的评论:<span class="time">{{ comment.date }}</span><br/>
                                {{ comment.content }}</p>
                        </div>
                    {% endfor %}
                </li>
            </ol>


        </div>
    </div>
{% endblock %}


{% block bo %}
    <script src="../../static/js/bootstrap.min.js"></script>
    <script src="../../static/js/jquery.ias.js"></script>
    <script src="../../static/js/scripts.js"></script>
{#    <script src="../../static/js/jquery.qqFace.js"></script>#}
    <script type="text/javascript">
        $(function () {
            $('.emotion').qqFace({
                id: 'facebox',
                assign: 'comments-textarea',
                path: '../static/images/arclist/'	//表情存放的路径
            });
        });
    </script>
{% endblock %}